<template>
  <v-btn
    class="theme-toggle-btn"
    :color="isDark ? 'grey-darken-4' : 'grey-lighten-4'"
    :icon="true"
    @click="toggleTheme"
    :aria-label="isDark ? '切换为亮色模式' : '切换为暗色模式'"
    elevation="2"
  >
    <v-icon :color="isDark ? 'yellow-lighten-2' : 'grey-darken-2'" size="22">
      {{ isDark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
    </v-icon>
  </v-btn>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { useTheme } from 'vuetify'

const { isDark } = useData()
const vuetifyTheme = useTheme()

function toggleTheme() {
  const html = document.documentElement
  const nextDark = !html.classList.contains('dark')

  html.classList.toggle('dark', nextDark)

  setTimeout(() => {
    isDark.value = nextDark
    vuetifyTheme.global.name.value = nextDark ? 'dark' : 'light'
    localStorage.setItem('user-color-scheme', nextDark ? 'dark' : 'light')
  }, 800)  // 保持和你的背景渐变一致
}

</script>

<style scoped>
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.3s;
}
</style>
